<script setup>
import { ref, reactive, onMounted, nextTick, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { get, post } from '@/myaxios'

/**封停功能 */
const lockoutDialogVisible = ref(false)
const lockoutForm = reactive({
    customerData: {
        uid: '',
        nickname: '',
        lockoutStatus: '',
        lockoutTime: '',
    }
})
const lockoutFormSubmit = async () => {

    if (lockoutForm.customerData.lockoutStatus == 1) {
        lockoutForm.customerData.lockoutTime = ''
        operationData("playCustomer/editLockout", lockoutForm.customerData)

    } else {
        if (lockoutForm.customerData.lockoutTime == '' || lockoutForm.customerData.lockoutTime == undefined) {
            ElMessage.error('请选择解封时间！');
            return;
        }
        if (new Date(lockoutForm.customerData.lockoutTime).getTime() <= new Date().getTime()) {
            ElMessage.error('不能小于当前时间！');
            return;
        }
        operationData("playCustomer/editLockout", lockoutForm.customerData)
    }
    lockoutDialogVisible.value = false;


}
const lockoutFormCancel = () => {
    let paramsObj = { ...pageInfo.pageData, ...queryForm };
    queryData(paramsObj);
}

const changeLockSwitch = (row) => {
    lockoutDialogVisible.value = true;
    lockoutForm.customerData = row;

}

/**删除功能 */
const deleteFormOpen = async (row) => {
    ElMessageBox.confirm(`确定删除[ ${row.uid}-${row.nickname}} ]用户吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            operationData("playCustomer/delete?", row)
        })
        .catch(() => {
            console.log('cancel');

        })
}


/**修改功能 */
const editDialogVisible = ref(false)
const editFormRef = ref()
const editForm = reactive({
    editData: {
        uid: '',
        nickname: '',
        vipGrade: '',
        loadGrade: '',
        godStatus: '',
        lockoutStatus: '',
        lockoutTime: '',
        ipAddress: '',
        fansNum: '',
        hobbyMusic: '',
        hobbyGame: '',
    }
})

const editFormSubmit = async () => {
    editDialogVisible.value = false;
    operationData("playCustomer/edit", editForm.editData)
}
const editFormOpen = async (row) => {
    editDialogVisible.value = true;
    const resp = await get("playCustomer/getPlyCustomerById", { uid: row.uid });
    if (resp.data.code === 2000) {
        editForm.editData = resp.data.returnData;
    }
}



/**添加功能 */
const addDialogVisible = ref(false)
const addFormRef = ref()
const addForm = reactive({
    uid: '',
    nickname: '',
    vipGrade: '',
    loadGrade: '',
    godStatus: '',
    lockoutStatus: '',
    lockoutTime: '',
    ipAddress: '',
    fansNum: '',
    hobbyMusic: '',
    hobbyGame: '',
    customerRemark: '',
})

const addFormSubmit = async () => {

    addDialogVisible.value = false;
    operationData("playCustomer/add", addForm)
}

const addFormOpen = async () => {
    addDialogVisible.value = true;
    nextTick(() => {
        addFormRef.value.resetFields();
    })
}


/**
 * 条件查询
 *
 */
const queryForm = reactive({
    uid: '',
    nickname: '',
    vipGrade: '',
    loadGrade: '',
    godStatus: '',
    lockoutStatus: ''
})



const onSubmit = () => {
    queryData(queryForm);
}
const onReset = () => {
    queryFormRef.value.resetFields();
    queryData({});
}


//获得查询表单组件对象
const queryFormRef = ref()

/**
 * 分页组件
 */
//分页组件参数对象
const pageInfo = reactive({
    pageData: {
        page: 1,
        pageSize: 10,
        total: 77
    }
})
//分页组件函数
//页码改变
const handleCurrentChange = (val) => {
    console.log(val);
    //通过对象操作数据 通过工具转成需要的格式
    pageInfo.pageData.page = val;
    //合并对象
    let paramsObj = { ...pageInfo.pageData, ...queryForm };
    queryData(paramsObj);

}
//每页显示记录改变
const handleSizeChange = (val) => {
    console.log(val);
    pageInfo.pageData.page = 1;
    pageInfo.pageData.pageSize = val;
    //合并对象
    let paramsObj = { ...pageInfo.pageData, ...queryForm };
    queryData(paramsObj);

}
//table列表数据
const tableList = reactive({ tableData: [] })


/**
 * 公共函数
 *
 */
//查询公共函数
const queryData = async (params) => {
    const resp = await get("playCustomer/query", params);
    if (resp.data.code === 2000) {
        //更新table数据
        tableList.tableData = resp.data.returnData;
        //更新分页组件数据
        pageInfo.pageData = resp.data.pageInfo;
    } else if (resp.data.code === 2001) {
        tableList.tableData = [];
        pageInfo.pageData = { page: 1, pageSize: 10, total: 0 }
    }
}
const operationData = async (url, params) => {
    const resp = await post(url, params);
    console.log(resp);
    //根据执行结果 显示操作反馈
    if (resp.data.code === 2010) {
        ElMessage.success(resp.data.msg)
    } else if (resp.data.code === 2011) {
        ElMessage.error(resp.data.msg)
    }
    //刷新table和分页数据
    //在当前查询条件下 刷新数据
    let paramsObj = { ...pageInfo.pageData, ...queryForm };
    queryData(paramsObj);
}

onMounted(() => {
    //首次查询table数据
    queryData({});
})
</script>

<template>
    <el-form ref="queryFormRef" :inline="true" :model="queryForm">
        <el-row>
            <el-col>
                <el-form-item label="客户名称" prop="nickname">
                    <el-input v-model="queryForm.nickname" placeholder="nickname" />
                </el-form-item>
                <el-form-item label="vip 等级" prop="vipGrade">
                    <el-input v-model="queryForm.vipGrade" placeholder="vipGrade" />
                </el-form-item>
                <el-form-item label="贵族等级" prop="loadGrade">
                    <el-input v-model="queryForm.loadGrade" placeholder="loadGrade" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-form-item label="客户类型" prop="godStatus">
                    <el-select style="width: 190px;" v-model="queryForm.godStatus" placeholder="godStatus">
                        <el-option label="普通" :value="0" />
                        <el-option label="大神" :value="1" />
                    </el-select>

                </el-form-item>
                <el-form-item label="封停状态" prop="lockoutStatus">
                    <el-select style="width: 190px;" v-model="queryForm.lockoutStatus" placeholder="lockoutStatus">
                        <el-option label="封停" :value="0" />
                        <el-option label="正常" :value="1" />
                    </el-select>

                </el-form-item>
                <el-form-item>
                    <el-button type="primary" plain @click="onSubmit">查询</el-button>
                    <el-button type="primary" plain @click="onReset">重置</el-button>
                    <el-button type="primary" plain @click="addFormOpen">添加</el-button>

                </el-form-item>
            </el-col>
        </el-row>


    </el-form>


    <el-table height="600px" ref="tableRef" :data="tableList.tableData" style="width: 100%">
        <el-table-column fixed="left" prop="uid" label="客户编号" width="80">
            <template #default="scope">
                <el-tag type="primary"> {{ scope.row.uid }} </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="nickname" label="客户名称" width="180">
        </el-table-column>
        <el-table-column prop="vipGrade" label="VIP级别" width="80">
            <template #default="scope">
                <el-tag type="success">{{ scope.row.vipGrade }} </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="loadGrade" label="贵族级别" width="80">
            <template #default="scope">
                <el-tag type="success"> {{ scope.row.loadGrade }} </el-tag>
            </template>
        </el-table-column>
        <!-- <el-table-column prop="customerImgs" label="照片墙" width="120">
            <template #default="scope">
                
                {{ scope.row.customerImgs }}

            </template>
        </el-table-column> -->
        <el-table-column prop="godStatus" label="客户类型" width="80">
            <template #default="scope">
                <el-tag v-if="scope.row.godStatus == 0" type="primary"> 普通 </el-tag>
                <el-tag v-else-if="scope.row.godStatus == 1" type="warning"> 大神 </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="ipAddress" label="IP所在地" width="80"></el-table-column>
        <el-table-column prop="customerRemark" label="用户签名" width="80"></el-table-column>
        <el-table-column prop="hobbyGame" label="喜欢游戏" width="80"></el-table-column>
        <el-table-column prop="hobbyMusic" label="喜欢音乐" width="80"></el-table-column>



        <el-table-column fixed="right" label="操作" width="180">
            <template #default="scope">
                <el-button type="primary" plain size="small" @click="editFormOpen(scope.row)">编辑</el-button>
                <el-button type="primary" plain size="small" @click="deleteFormOpen(scope.row)">删除</el-button>
            </template>
        </el-table-column>
        <el-table-column fixed="right" prop="lockoutStatus" label="封禁状态" width="80">
            <template #default="scope">
                <el-switch v-model="scope.row.lockoutStatus" inline-prompt active-text="正常" inactive-text="封停"
                    :active-value="1" :inactive-value="0"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    @change="changeLockSwitch(scope.row)" />
            </template>
        </el-table-column>
        <el-table-column fixed="right" prop="lockoutTime" label="解封时间" width="180"></el-table-column>

    </el-table>

    <el-pagination v-model:current-page="pageInfo.pageData.page" v-model:page-size="pageInfo.pageData.pageSize"
        :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.pageData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!-- 添加对话框 -->
    <el-dialog v-model="addDialogVisible" title="添加" width="700">

        <el-form ref="addFormRef" :model="addForm" label-width="auto" style="max-width: 700px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="客户名称" prop="nickname">
                        <el-input v-model="addForm.nickname" placeholder="nickname" />
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item label="客户类型" prop="godStatus">
                        <el-select style="width: 100%;" v-model="addForm.godStatus" placeholder="godStatus">
                            <el-option label="普通" :value="0" />
                            <el-option label="大神" :value="1" />
                        </el-select>

                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="vip级别" prop="vipGrade">
                        <el-input v-model="addForm.vipGrade" placeholder="vipGrade" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="贵族级别" prop="loadGrade">
                        <el-input v-model="addForm.loadGrade" placeholder="loadGrade" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="IP归属地" prop="ipAddress">
                        <el-input v-model="addForm.ipAddress" placeholder="ipAddress" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="粉丝数量" prop="fansNum">
                        <el-input v-model="addForm.fansNum" placeholder="fansNum" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="喜欢游戏" prop="hobbyMusic">
                        <el-input type="textarea" v-model="addForm.hobbyMusic" placeholder="hobbyMusic" />
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="喜欢音乐" prop="hobbyGame">
                        <el-input type="textarea" v-model="addForm.hobbyGame" placeholder="hobbyGame" />
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="个人签名" prop="customerRemark">
                        <el-input type="textarea" v-model="addForm.customerRemark" placeholder="customerRemark" />
                    </el-form-item>
                </el-col>

            </el-row>

            <!-- <el-row>
                <el-col :span="24">
                    <el-form-item label="照片墙" prop="customerImgs">
                        <el-input type="textarea" v-model="addForm.customerImgs" placeholder="customerImgs" />
                    </el-form-item>
                </el-col>

            </el-row> -->


            <el-row>
                <el-col :span="12">
                    <el-form-item label="封停状态" prop="lockoutStatus">
                        <el-select style="width: 100%;" v-model="addForm.lockoutStatus" placeholder="lockoutStatus">
                            <el-option label="封停" :value="0" />
                            <el-option label="正常" :value="1" />
                        </el-select>

                    </el-form-item>
                </el-col>
                <el-col :span="12">

                    <el-form-item label="解封时间" prop="lockoutTime">
                        <!-- <el-input v-model="queryForm.parentId" placeholder="parentId" /> -->
                        <el-date-picker style="width: 100%;" v-model="addForm.lockoutTime" type="datetime" placeholder="解封时间"
                            value-format="yyyy-MM-dd HH:mm:ss" />

                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addFormSubmit">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>

 <!-- 修改对话框 -->
 <el-dialog v-model="editDialogVisible" title="修改" width="700">
    <el-form ref="editFormRef" :model="editForm.editData" label-width="auto" style="max-width: 700px">
        <el-row>
                <el-col :span="24">
                    <el-form-item label="客户编号" prop="uid">
                        <el-input v-model="editForm.editData.uid" disabled placeholder="uid" />
                    </el-form-item>

                </el-col>
            </el-row>
        <el-row>
                <el-col :span="12">
                    <el-form-item label="客户名称" prop="nickname">
                        <el-input v-model="editForm.editData.nickname" placeholder="nickname" />
                    </el-form-item>

                </el-col>
                <el-col :span="12">
                    <el-form-item label="客户类型" prop="godStatus">
                        <el-select style="width: 100%;" v-model="editForm.editData.godStatus" placeholder="godStatus">
                            <el-option label="普通" :value="0" />
                            <el-option label="大神" :value="1" />
                        </el-select>

                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="vip级别" prop="vipGrade">
                        <el-input v-model="editForm.editData.vipGrade" placeholder="vipGrade" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="贵族级别" prop="loadGrade">
                        <el-input v-model="editForm.editData.loadGrade" placeholder="loadGrade" />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="IP归属地" prop="ipAddress">
                        <el-input v-model="editForm.editData.ipAddress" placeholder="ipAddress" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="粉丝数量" prop="fansNum">
                        <el-input v-model="editForm.editData.fansNum" placeholder="fansNum" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="喜欢游戏" prop="hobbyMusic">
                        <el-input type="textarea" v-model="editForm.editData.hobbyMusic" placeholder="hobbyMusic" />
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="喜欢音乐" prop="hobbyGame">
                        <el-input type="textarea" v-model="editForm.editData.hobbyGame" placeholder="hobbyGame" />
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="个人签名" prop="customerRemark">
                        <el-input type="textarea" v-model="editForm.editData.customerRemark" placeholder="customerRemark" />
                    </el-form-item>
                </el-col>

            </el-row>

            <!-- <el-row>
                <el-col :span="24">
                    <el-form-item label="照片墙" prop="customerImgs">
                        <el-input type="textarea" v-model="editForm.editData.customerImgs" placeholder="customerImgs" />
                    </el-form-item>
                </el-col>

            </el-row> -->


    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="editFormSubmit">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
 
  <!-- 封停对话框  -->
  <el-dialog v-model="lockoutDialogVisible" title="修改" width="400" @close="lockoutFormCancel">
    <div v-if="lockoutForm.customerData.lockoutStatus == 1">
        <h3>确认解封[ {{lockoutForm.customerData.uid}}-{{lockoutForm.customerData.nickname}} ]用户?</h3>
    </div>
    <div v-else>
        <el-form-item label="解封时间" prop="lockoutTime">
            <el-date-picker style="width: 100%;" v-model="lockoutForm.customerData.lockoutTime" type="datetime" placeholder="解封时间"
                value-format="YYYY-MM-DD HH:mm:ss" />

        </el-form-item>
    </div>



    <template #footer>
      <div class="dialog-footer">
        <el-button @click="lockoutDialogVisible = false;">取消</el-button>
        <el-button type="primary" @click="lockoutFormSubmit">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<style scoped>

</style>